<template>
  <div>
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin: 20px"
    >
      <el-form label-width="80px" :inline="true" size="normal">
        <el-form-item label="一级列表" size="small">
          <el-select
            v-model="category1IdCopy"
            placeholder="请选择一级列表"
            @change="SET_CATEGORY1ID(category1IdCopy)"
          > 
            <el-option
              v-for="item in category1List"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级列表" size="small">
          <el-select
            v-model="category2IdCopy"
            placeholder="请选择二级列表"
            @change="SET_CATEGORY2ID(category2IdCopy)"
          >
            <el-option
              v-for="item in category2List"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级列表" size="small">
          <el-select
            v-model="category3IdCopy"
            placeholder="请选择三级列表"
            @change="SET_CATEGORY3ID(category3IdCopy)"
          >
            <el-option
              v-for="item in category3List"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "Category",
  data() {
    return {
      category1IdCopy: null,
      category2IdCopy: null,
      category3IdCopy: null,
    };
  },
  computed: {
    ...mapState("category", [
      "category1List",
      "category2List",
      "category3List",
      "category1Id",
      "category2Id",
      "category3Id",
    ]),
  },
  methods: {
    ...mapActions("category", [
      "getCategory1ListActions",
      "getCategory2ListActions",
      "getCategory3ListActions",
    ]),
    ...mapMutations("category", [
      "SET_CATEGORY1ID",
      "SET_CATEGORY2ID",
      "SET_CATEGORY3ID",
    ]),
  },
  mounted() {
    this.getCategory1ListActions(); //初始化获取一级分类列表
  },
  watch: {
    // category1IdCopy(){ //一级id发生变化 清空
    //   this.category2IdCopy = null
    //   this.category3IdCopy = null
    // },
    category1IdCopy() {  //监听1id 获取二级分类列表
      this.getCategory2ListActions();
    },
    category2IdCopy() {  //监听2id 获取三级分类列表
      this.getCategory3ListActions();
    },
  },
};
</script>

<style lang="scss" scoped></style>
